<template>
  <div class="mobile-layout mobile-container safe-area-padded">
    <van-nav-bar
      v-if="showChildControls"
      :title="currentChildName"
      right-text="切换"
      @click-right="showPicker = true"
    />
    <ClientOnly v-if="showChildControls">
      <van-popup v-model:show="showPicker" round position="bottom">
        <ChildSwitcher @close="showPicker = false" />
      </van-popup>
    </ClientOnly>
    <main class="content">
      <slot />
    </main>
    <van-tabbar v-if="showChildControls" route>
      <van-tabbar-item to="/settings" icon="setting-o">设置</van-tabbar-item>
      <van-tabbar-item to="/record" icon="notes-o">记录</van-tabbar-item>
      <van-tabbar-item to="/weekly" icon="calendar-o">兑换</van-tabbar-item>
      <van-tabbar-item to="/stats" icon="bar-chart-o">统计</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style>
.mobile-layout { display: flex; flex-direction: column; min-height: 100vh; }
.content { flex: 1; overflow: auto; padding-bottom: 64px; }
</style>

<script setup>
const route = useRoute()
const showPicker = ref(false)
const children = useChildrenStore()
const currentChildName = computed(() => {
  const child = children.items.find(c => c.id === children.currentChildId)
  return child ? child.name : '儿童积分'
})
const showChildControls = computed(() => !route.path.startsWith('/auth'))
</script>

